<template>
    <div>
      
        <MyModal :visible="visible" title="视频设备" width="80%" @close="handleCancel">
            <div class="video-list">
                <!-- <div v-for="item in monitorList" style="padding: 10px;">{{ item }}</div> -->
                <template v-for="(item, index) in monitorList">
                    <LookYsMonitor v-if="item.productType == 3 && item.productSupplierType == 3" :app-key="item.appKey"
                        :app-secret="item.appSecret" :device-code="item.deviceCode" :channel-no="item.channelNo"
                        class="video-item"></LookYsMonitor>
                    <LookYsMonitor v-if="item.productType == 5 && item.productSupplierType == 3" :app-key="item.appKey"
                        :app-secret="item.appSecret" :device-code="item.deviceCode" :channel-no="item.channelNo"
                        class="video-item"></LookYsMonitor>
                    <ImouPlayer v-if="item.productType == 3 && item.productSupplierType == 4" :iot="item"
                        class="video-item"></ImouPlayer>
                </template>
            </div>
            <div style="clear: both;"></div>
        </MyModal>
    </div>
</template>
<script setup lang="ts">
import ImouPlayer from '@/components/imouPlayer.vue';
import LookYsMonitor from '@/components/lookYsMonitor.vue';
import { ref, watch } from 'vue';
import { useYsStore } from '@/stores/ys';
import { deviceCameraList } from '@/api/ysApi';
import MyModal from './myModal.vue';
const ysStore = useYsStore()
const props = withDefaults(defineProps<{
    visible: boolean
    list?: any[],

}>(), {
    list: [] as any,

})
const emit = defineEmits<{
    ok: [],
    cancel: [],

}>()
const monitorList = ref<any>([])
watch(() => props.list, async () => {
    monitorList.value = []
    for (let item of props.list) {
        if (item.productType == 3 && item.productSupplierType == 3) {
            /**萤石云摄像头 */
            for (let param of item.deviceParam) {
                if (param.name == 'appKey') {
                    item.appKey = param.value
                }
                if (param.name == 'appSecret') {
                    item.appSecret = param.value
                }
                if (param.name == 'channelNo') {
                    item.channelNo = param.value
                }
            }
            await ysStore.getToken(item.appKey, item.appSecret)
            monitorList.value.push({
                ...item,
            })
        }
        if (item.productType == 5 && item.productSupplierType == 3) {
            /**萤石云超脑 */
            for (let param of item.deviceParam) {
                if (param.name == 'appKey') {
                    item.appKey = param.value
                }
                if (param.name == 'appSecret') {
                    item.appSecret = param.value
                }
                // if (param.name == 'channelNo') {
                //     item.channelNo = param.value
                // }
            }
            let accessToken = await ysStore.getToken(item.appKey, item.appSecret)
            let res = await deviceCameraList({
                accessToken: accessToken,
                deviceSerial: item.deviceCode
            })
            res.data = res.data.filter((a: any) => {
                return a.status == 0 || a.status == 1
            })
            
            for (let mo of res.data) {
                monitorList.value.push({
                    ...item,
                    ...mo
                })
            }
        }

        if (item.productType == 3 && item.productSupplierType == 4) {
            /**乐橙云摄像头 */
            monitorList.value.push(item)
        }
    }
})
const handleOk = () => {
    emit('ok')
    handleCancel()
}
const handleCancel = () => {
    emit('cancel')
}
</script>
<style scoped>
.video-list {
  
}

.video-item {
    width: 400px;
    height: 300px;
    float: left;
    margin: 0 20px 20px 0;
}
</style>